<template>
  <div class="table-top-control">
    <div>
      <a-space>
        <slot></slot>
      </a-space>
    </div>
    <a-space size="middle">
      <!-- 刷新表格数据 -->
      <ReloadOutlined
        :spin="loading"
        class="table-top-control__icon-btn"
        @click="reloadData"
      />
      <!-- 调整表格尺寸 -->
      <a-dropdown>
        <ColumnHeightOutlined class="table-top-control__icon-btn" />
        <template #overlay>
          <a-menu>
            <a-menu-item @click="changeSize('default')">默认</a-menu-item>
            <a-menu-item @click="changeSize('middle')">中等</a-menu-item>
            <a-menu-item @click="changeSize('small')">紧凑</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <!-- 设置表格列情况 -->
      <a-popover
        trigger="click"
        arrow-point-at-center
        placement="leftTop"
        overlayClassName="table-top-control__popover"
      >
        <template #title>
          <div class="table-top-control__setting-header">
            <a-checkbox
              v-model:checked="checkBoxState.checkAll"
              :indeterminate="checkBoxState.indeterminate"
              @change="onCheckAllChange"
              >列展示</a-checkbox
            >
            <a @click="resetCheck">重置</a>
          </div>
        </template>
        <template #content>
          <div
            ref="checkboxWrapper"
            class="table-top-control__checkbox-wrapper"
            direction="vertical"
          >
            <div
              class="table-top-control__checkbox-item"
              v-for="(element, index) in checkBoxState.plainOptions"
              :key="index"
            >
              <icon-font
                class="table-top-control__move-handle"
                type="px-move"
              />
              <a-checkbox v-model:checked="element.checked">{{
                element.label
              }}</a-checkbox>
            </div>
          </div>
        </template>
        <SettingOutlined class="table-top-control__icon-btn" />
      </a-popover>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCheckState } from './hooks/useCheckState'
import useDrag from '@/hooks/useDrag'

import type { AntdSizeType, TableColumnProps } from '#/antd'

const props = withDefaults(
  defineProps<{
    tableSize?: AntdSizeType
    tableColumns: TableColumnProps[]
    loading?: boolean
  }>(),
  {
    tableSize: 'small',
    loading: false,
  }
)

const emit = defineEmits<{
  (e: 'update:tableSize', size: AntdSizeType): void
  (e: 'update:tableColumns', columns: TableColumnProps[]): void
  (e: 'reloadData'): void
}>()

const checkboxWrapper = ref(null)
const { checkBoxState, onCheckAllChange, resetCheck } = useCheckState(
  props.tableColumns
)

useDrag(checkboxWrapper, checkBoxState.plainOptions, {
  handle: '.table-top-control__move-handle',
})

const changeSize = (size: AntdSizeType) => {
  emit('update:tableSize', size)
}

const reloadData = () => {
  if (!props.loading) {
    emit('reloadData')
  }
}
</script>

<style lang="scss" scoped>
@include b(table-top-control) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  @include e(icon-btn) {
    cursor: pointer;
    transition: 0.3s color ease;
    font-size: 16px;
    color: #000;
    &:hover {
      color: #438cf3;
    }
  }
  @include e(setting-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin: 0px 20px;
  }
  @include e(move-handle) {
    font-size: 16px;
    margin-right: 2px;
    cursor: move;
  }
  @include e(checkbox-wrapper) {
    margin: 8px 2px;
    display: flex;
    flex-direction: column;
  }
  @include e(checkbox-item) {
    margin-bottom: 8px;
  }
}
</style>
<style lang="scss">
.table-top-control__popover {
  .ant-popover-inner-content {
    padding: 0px;
  }
  .ant-popover-title {
    padding: 0px;
  }
}
</style>
